<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户注册</title>
    <!-- 功能1：用户注册功能，将表单中的数据插入aa_user数据库（完成） -->
    <!-- 功能2：通过失去焦点事件查询用户名是否重复，并且设置正则表达式规则 （完成） -->
    <!-- 功能3：通过失去焦点事件查询电话是否重复，并且设置正则表达式规则 （完成） -->
    <!-- 功能4：在用户名或电话有重复的情况下无法完成注册(完成) -->
</head>
<body>
    <form action="#">
        <h1>用户注册</h1>
        <h3 id="msg"></h3>
        <ul>
            <li>
                用户名<input type="text" name="uname" id="uname"  onblur="funame()" value="">
                <span id="unamesel"></span>
            </li>
            <li>
                密码<input type="password" name="upwd" id="upwd" value="">
            </li>
            <li>
                邮箱<input type="text" name="email" id="email" value="">
            </li>
            <li>
                电话<input type="text" name="phone" id="phone" value="" onblur="fuphone()">
                <span id="phonesel"></span>
            </li>
            <li>
                头像<input type="text" name="asvatar" id="asvatar" value="">
            </li>
            <li>
                真实姓名<input type="text" name="user_name" id="user_name" value="">
            </li>
            <li>
                性别<br>
                男<input type="radio" name="gender" id="gender">
                女<input type="radio" name="gender" id="gender">
            </li>
            <li>
                宠物名称 <input type="text" name="Pets_name" id="Pets_name" value="">
            </li>
            <li>
                <input type="button" name="btn" id="btn" value="点击注册" onclick="reg()">
            </li>
        </ul>
    </form>
    <script>
        var controller=false;
        //注册
        function reg(){
            if(!controller){
                return;
            }
            //通过DOM获取表单中各input的value
            var uname=document.getElementById('uname').value;
            var upwd=document.getElementById('upwd').value;
            var email=document.getElementById('email').value;
            var phone=document.getElementById('phone').value;
            var asvatar=document.getElementById('asvatar').value;
            var user_name=document.getElementById('user_name').value;
            var gender=document.getElementById('gender').value;
            var  Pets_name=document.getElementById('Pets_name').value;
            var unamesel=document.getElementById('unamesel').value
            // 该功能无效，待修改
            // if(unamesel !== '用户名可以使用'){
            //         alert('用户名已被使用')
            //     }
            //创建xhr对象
            var xhr=new XMLHttpRequest();
            //添加改变状态事件
            xhr.onreadystatechange=function(){
                var msg=document.getElementById('msg');
                if(xhr.readyState===4){
                    var obj=JSON.parse(xhr.responseText);
                    if(obj.code==200){
                        alert('注册成功')
                        // location.href="login.html"
                    }else(
                        alert('注册失败！请重新填写')
                    )}
            }
            //打开连接
            var url="http://127.0.0.1:8080/a1/users/register"
            xhr.open('POST',url,true);
            //修改请求头信息
            xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
            //发送请求
            xhr.send(`uname=${uname}&upwd=${upwd}&email=${email}&phone=${phone}&asvatar=${asvatar}&user_name=${user_name}&gender=${gender}&Pets_name=${Pets_name}`);
        }
        //使用失去焦点事件查询用户名是否重复
        function funame(){
                var uname=document.getElementById('uname').value;
                var unamesel=document.getElementById('unamesel')
                //判断用户输入的内容是否符合所设置的正则表达式
                var reg=/^[a-zA-Z0-9]{3,12}$/
                if(!reg.test(uname)){
                    unamesel.innerHTML="请输入3-12位数字或字母"
                    return;
                    }
                var xhr=new XMLHttpRequest();
                xhr.onreadystatechange=function(){
                    if(xhr.readyState===4&&xhr.status===200){
                        var obj=JSON.parse(xhr.responseText);
                        // console.log(obj);
                        // 没有查询到数据会返回一个空数组，所以返回为空数组则为没有重复
                        if(!obj.data.length){
                            unamesel.innerHTML="用户名可以使用"
                            controller=true;
                        }else{
                            unamesel.innerHTML="用户名已被使用，请重新输入"
                            controller=false;
                        }
                    }
                }
                var url=`/a1/users/get?uname=${uname}`
                xhr.open('GET',url,true);
                xhr.send();
            }
        //使用失去焦点事件查询电话是否重复
        function fuphone(){
                var phone=document.getElementById('phone').value;
                var phonesel=document.getElementById('phonesel')
                //判断用户输入的内容是否符合所设置的正则表达式
                var reg=/^1[3|4|5|7|8][0-9]{9}$/
                if(!reg.test(phone)){
                    phonesel.innerHTML="请输入正确的手机号"
                    return;
                    }
                var xhr=new XMLHttpRequest();
                xhr.onreadystatechange=function(){
                    if(xhr.readyState===4&&xhr.status===200){
                        var obj=JSON.parse(xhr.responseText);
                        console.log(obj);
                        // 没有查询到数据会返回一个空数组，所以返回为空数组则为没有重复
                        if(!obj.data.length){
                            phonesel.innerHTML="手机号未被注册"
                            controller=true;
                        }else{
                            phonesel.innerHTML="手机号已被注册"
                            controller=false;
                        }
                    }
                }
                var url=`/a1/users/get?phone=${phone}`
                xhr.open('GET',url,true);
                xhr.send();
            }
    </script>
</body>
</html>